<!-- 知识目标达成度 -->
<template>
    <div class="page-container">
        <div ref="radarChart" class="radar-chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'KnowledgeGoalAchievement',
    data() {
        return {
            chart: null,
            indicator: [],
            option: {
                backgroundColor: "transparent",
                color: ["#00F6FF"],
                tooltip: {
                    show: true,
                    trigger: "item",
                    backgroundColor: "rgba(0, 20, 40, 0.9)",
                    borderColor: "#13adff",
                    borderWidth: 1,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    },
                    extraCssText: 'box-shadow: 0 0 10px rgba(19, 173, 255, 0.5); border-radius: 4px; backdrop-filter: blur(5px);'
                },
                radar: {
                    center: ["50%", "50%"],
                    radius: "70%",
                    startAngle: 90,
                    splitNumber: 5,
                    shape: "circle",
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(0, 246, 255, 0.05)', 'rgba(0, 246, 255, 0.1)'],
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 10
                        }
                    },
                    axisLabel: { 
                        show: false,
                        color: "#fff",
                        fontSize: 12
                    },
                    axisLine: {
                        show: true,
                        lineStyle: { color: "rgba(0, 246, 255, 0.4)" }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0, 246, 255, 0.6)",
                            type: "dashed"
                        }
                    },
                    indicator: [],
                    scale: true,
                    axisName: {
                        show: true,
                        color: '#fff',
                        fontSize: 12
                    }
                },
                series: [{
                    type: "radar",
                    symbol: "circle",
                    symbolSize: 6,
                    itemStyle: {
                        color: '#00F6FF',
                        borderColor: "rgba(0, 246, 255, 0.6)",
                        borderWidth: 2,
                        shadowColor: 'rgba(0, 246, 255, 0.5)',
                        shadowBlur: 8
                    },
                    areaStyle: {
                        color: "rgba(0, 246, 255, 0.2)"
                    },
                    lineStyle: {
                        color: "#00F6FF",
                        width: 2,
                        type: "solid"
                    },
                    data: []
                }]
            }
        }
    },
    computed: {
        requestData() {
            return {
                missionType: this.$store.state.mission,
                studentClassId: this.$store.state.current,
                targetType: 0
            }
        }
    },
    watch: {
        requestData: {
            handler: 'fetchDataAndRenderChart',
            deep: true
        }
    },
    mounted() {
        this.fetchDataAndRenderChart()
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize)
        this.chart?.dispose()
    },
    methods: {
        handleResize() {
            this.chart?.resize()
        },
        async fetchDataAndRenderChart() {
            try {
                const response = await this.$axios.post("/group/averageScoreByGroup", this.requestData)
                const { group, score } = response.data.data || {}
                
                if (group?.length && score?.length && group.length === score.length) {
                    this.option.radar.indicator = group.map((groupName, index) => ({
                        name: `第${groupName}组: ${score[index]}分`,
                        max: 100
                    }))
                    
                    this.option.series[0].data = [{
                        name: '班级平均分',
                        value: score
                    }]
                } else {
                    this.option.radar.indicator = [{ name: '无数据', max: 100 }]
                    this.option.series[0].data = [{ name: '无数据', value: [0] }]
                }
                
                this.initChart()
            } catch (error) {
                console.error('获取数据失败', error)
                this.option.radar.indicator = [{ name: '无数据', max: 100 }]
                this.option.series[0].data = [{ name: '无数据', value: [0] }]
                this.initChart()
            }
        },
        initChart() {
            if (!this.chart) {
                this.chart = echarts.init(this.$refs.radarChart)
            }
            this.chart.setOption(this.option)
        }
    }
}
</script>

<style scoped>
/* 重置默认样式，去掉边距 */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.page-container {
    width: 100%;
    height: 85%;
    margin-top: 5px;
}

.radar-chart {
    width: 100%;
    height: 100%;
}
</style>    